<template>
  <div class="main">
    <fm-nav-bar title="新闻详情" left-arrow @click-left="onClickLeft" />
    <div class="main-container">
      <div class="body-container">
        <div class="content-box">
          <div class="notice-title-box">
            <!-- 标题 -->
            <div class="titles">
              {{ newsInfo.title }}
            </div>
            <!-- 创建时间 -->
            <div class="dept-font">{{ newsInfo.createDate }}</div>
          </div>
          <!-- 正文 -->
          <div class="notice-body">
            <div v-html="newsInfo.thetext"></div>
            <img :src="require('@/assets/img/news-img-one.jpg')" />
            <div v-html="newsInfo.thetext"></div>
            <img :src="require('@/assets/img/news-img-two.jpg')" />
          </div>
        </div>
      </div>
      <!-- 附件 -->
      <div class="file-list">
        <div class="file-content">
          <div>
            <uploader
              v-model="newsInfo.attachment"
              :disabled="true"
              :deletable="false"
              ref="attachment"
              type="file"
              class="uploder-attachment"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { NavBar, Form, Field, Button, Image } from 'fawkes-mobile-lib'
import Uploader from '@/components/upload/Uploader.vue'
export default {
  name: 'NewsNotice',
  components: {
    [NavBar.name]: NavBar,
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [Image.name]: Image,
    Uploader,
  },
  data: () => ({
    newsInfoList: [
      {
        title: '重庆史上最大水利工程——渝西水资源配置工程全线开工 将惠及近千万市民',
        createDate: '2021-02-02 15:40:15',
        attachment: 'BA06089C-0F15-4B9E-9756-A43A4BD1F4E2',
        thetext:
          '&nbsp;&nbsp;&nbsp;&nbsp;作为国家“172”重大水利项目、国务院同意实施的2020—2022年150项重大水利工程之一，工程将新建长江金刚沱、嘉陵江草街等20座泵站、3座调蓄水库、367公里输水管道、81公里隧洞，并通过优化水资源配置，最终实现长江和嘉陵江互联互通、现有和新建水源工程互调互济。<br>&nbsp;&nbsp;&nbsp;&nbsp;工程采用“大集中、小组团”的施工方案，大集中片(沙坪坝、九龙坡、江津、璧山、永川、荣昌、大足、铜梁、高新9区)以长江和嘉陵江为主水源提水，小组团片(潼南、合川、北碚3区)分别就近从涪江、渠江、嘉陵江提水。',
      },
      {
        title: '关于举办“⾮线性筹划⼤会委员会”的会议通',
        createDate: '2021-02-02 15:40:15',
        attachment: 'AA9B5997-F45B-49E3-B890-5A2DF715CE31',
        thetext:
          '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;西干线从圣中水库取水后，向西自流，通过永安隧洞穿越云雾山后至永川区临江加压站，加压后经双竹镇、黄瓜山隧洞至黄瓜山高位水池，再从黄瓜山高位水池自流经青峰镇、英山隧洞至双石加压站，二次加压后至秦家湾高位水池，最后自流入玉滩水库，线路总长262.75公里。西干线布置3条分干线、7条支线和1条连通线，分别输水至铜梁同心桥水厂、大足清明桥水厂、荣昌区黄金坡水厂。西干线总投资67亿元，总工期为54个月。',
      },
      {
        title: '院内⼯会远远会选举⼤会通知',
        createDate: '2021-02-02 15:40:15',
        attachment: 'BA06089C-0F15-4B9E-9756-A43A4BD1F4E2',
        thetext:
          '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;包括重庆市长江以北、嘉陵江渠江以西区域，主要覆盖沙坪坝、九龙坡、北碚、江津、合川、永川、大足、璧山、铜梁、潼南、荣昌11个区和重庆高新区，&nbsp; &nbsp;受益面积达1.18万平方公里',
      },
    ],
  }),
  computed: {
    id() {
      return this.$route.params.id
    },
    newsInfo() {
      return this.newsInfoList[this.id]
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
  },
}
</script>
<style lang="less" scoped>
.main {
  height: 100%;
}
.main-container {
  height: calc(100% - 96px);
  overflow: auto;
  padding-bottom: 16px;
  background-color: #f2f3f4;
}
.body-container {
  padding: 30px 30px 18px 30px;
  background-color: #fff;
}
.notice-title-box {
  // text-align: center;
  .titles {
    font-size: 36px;
    font-weight: 600;
    color: #191919;
    line-height: 52px;
    // display: inline-block;

    font-family: PingFangSC-Regular, PingFang SC;
    text-align: left;
  }
  .dept-font {
    font-size: 24px;
    color: #555555;
    line-height: 40px;
    margin-top: 30px;
    text-align: left;
  }
}
.notice-body {
  margin-top: 30px;
  font-size: 32px;
  font-weight: 400;
  color: #555555;
  line-height: 56px;
  img {
    width: 100%;
    height: auto;
    margin: 20px 0;
  }
}
.file-list {
  margin-top: 16px;
  padding-bottom: 50px;
  background-color: #fff;
}
</style>
